import { Component, ReactNode } from 'react'
// as 可以取别名
// NavLink对比Link 多了些内容
// activeClassName  被激活的时候需要添加的类名
// activeStyle  被激活的时候添加的样式
import {BrowserRouter as Router,Link,Route, NavLink, Switch, RouteComponentProps, withRouter} from 'react-router-dom'
import Discover from './Discover'
import Friend from './Friend'
import Page404 from './Page404'
import './Base.css'
import List from './List'
import Detail from './Detail'
import Listto from "./ListTo";
import Detailto from "./DetailTo";
import CustomLink from './CustomLink'

// type Iprops = {} & RouteComponentProps
type Iprops = {
    [k in keyof RouteComponentProps]?:RouteComponentProps[k]
}
// @ts-ignore
@withRouter
class Base extends Component<Iprops,any> {
    handleClick = () => {
        console.log(this.props);
        let { history } = this.props
        // 跳转到list
        // history.push('/list')
        // 传递参数
        // history.push('/discover?name=9527')
        // 传递其他参数

        let push:(a:any) => void = history!.push
        push({pathname:'/discover',query:{name:9527}})
    }
    render(): ReactNode {
        return(
            <fieldset>
                <legend>基本路由</legend>

                <ul>
                    <li>
                        <CustomLink to="/friend/123">守望</CustomLink>
                    </li>
                    <li>
                        <CustomLink to="/discover?name=9527">发现</CustomLink>
                    </li>
                    <li>
                        <CustomLink to="/list">水果</CustomLink>
                    </li>
                    <li>
                        <CustomLink to="/listto">商品</CustomLink>
                    </li>
                </ul>
                <button onClick={this.handleClick}>编程式导航按钮</button>
                {/* 跳转页面 */}
                {/* <NavLink activeClassName='jihuo' to='/friend'>守望</NavLink>
                &nbsp;
                | 
                &nbsp;
                <NavLink to='/discover' activeStyle={{color:'deeppink'}}>发现</NavLink>
                &nbsp;
                |
                &nbsp;
                <Link to='/list'>水果</Link>
                &nbsp;
                |
                &nbsp;
                <Link to='/listto'>商品</Link> */}
                {/* Switch的作业就是，，路由一次只能匹配一次 */}
                <Switch>
                    {/* 路由配置 */}
                    {/* 路由默认是模糊匹配 */}
                    <Route path='/friend/:id' component={Friend} />
                    <Route path='/discover' component={Discover} />
                    <Route path='/list' component={List} />
                    <Route path='/detail/:id' component={Detail} />

                    <Route path='/listto' component={Listto} />
                    <Route path='/Detailto/:id' component={Detailto} />
                    {/* children不管路径是否匹配成功，组件都会加载 */}
                    {/* <Route path='/custom' children={(props:any)=> <CustomLink {...props} age={30}/>} /> */}
                    {/* 位置一点要放到最后 */}
                    <Route component={Page404} />
                </Switch>
            </fieldset>
          
        )
    }
}
// export default withRouter(Base)
export default Base